<style>
    .widget {
        padding: 5px;
    }

    .widget .layui-card-header {
        font-size: 15px;
    }

    .widget .layui-card-header .title {
        height: 42px;
        overflow: hidden;
        white-space: nowrap;
        width: calc(100% - 10px);
        text-overflow: ellipsis;
    }
    .widget .layui-card-header .tools {
        position: absolute;
        right: 10px;
        top: 0px;
    }

    .widget .layui-card-header .tools .refresh i {
        font-size: 12px;
    }

    .widget .layui-card-body.number {
        text-align: center;
        font-size: 30px;
        height: 50px;
        line-height: 50px;
    }
</style>
<div class="widgets layui-row">
    {foreach name="widgetInfos" item="widgetInfo" key="name"}
    <div class="widget layui-col-xs{$widgetInfo['width'][0]} layui-col-sm{$widgetInfo['width'][1]} layui-col-md{$widgetInfo['width'][2]} layui-col-lg{$widgetInfo['width'][3]}"
         data-name="{$name}" data-mid="{$widgetInfo.mid}" id="widget-{$name}-{$widgetInfo.mid}">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="title" title="{$widgetInfo['title']}">{$widgetInfo['title']}</div>
                <div class="tools">
                    {php}
                    $refreshTip = "刷新";
                    if($widgetInfo['time']) {
                        $refreshTip = "数据刷新时间：".$widgetInfo['time'];
                    }
                    {/php}
                    <a class="refresh" href="javascript:;" title="{$refreshTip}">
                        <i class="layui-icon layui-icon-refresh"></i>
                        <i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
                           style="display: none;"></i>
                    </a>
                </div>
            </div>
            <div class="layui-card-body {$widgetInfo.type}">
                {$widgetInfo['content']}
            </div>
        </div>
    </div>
    {/foreach}
</div>

<script>
    $(".widget .layui-card-header .tools .refresh .layui-icon-refresh").click(function () {
        var $refresh = $(this);
        var $loading = $(this).parent().find(".layui-icon-loading");
        var $widget = $(this).parents(".widget");
        var name = $widget.attr("data-name");
        var mid = $widget.attr("data-mid");
        $refresh.hide();
        $loading.show();

        $refresh.parent().attr("title", "数据刷新中");
        $.post("/core/enterprise.module/widgetContent?eid={$eid}&mid=" + mid, {
            name: name,
            force: true
        }, function (ret) {
            if (ret.code == 1) {
                $refresh.show();
                $loading.hide();
                $widget.find(".layui-card-body").html(ret.data.content);
                $refresh.parent().attr("title", ret.data.time ? ("数据刷新时间：" + ret.data.time) : "刷新");
            } else {
                layer.alert(ret.msg);
            }
        }, "json");
    });
</script>